<template>
    <Table :loading="tableLoading" :tableColumns="tableHeader" :tableData="tableData" showPage :pageObj="tablePage"
        @changePage="handlePageChange"></Table>
</template>
<script>
export default defineComponent({
    name: 'custom-table',
});
</script>
<script setup>
import Table from "@/components/Table/Table.vue"
import { getTableData } from "@/api/index"

const tableLoading = ref(false)
const tablePage = ref({
    page: 1,
    size: 20,
    total: 0,
})

let tableHeader = [
    {
        label: "日期",
        prop: "date",
    },
    {
        label: "姓名",
        prop: "name",
    },
    {
        label: "地址",
        prop: "address",
    },
]
const tableData = ref([])
// 请求表格数据
const requestTableData = async () => {
    tableLoading.value = true
    try {
        let params = {
            page: tablePage.value.page,
            size: tablePage.value.size,
        }
        let res = await getTableData(params)
        tableData.value = res.data
        tablePage.value.total = res.count
    } catch (err) {
        console.log(err)
    } finally {
        tableLoading.value = false
    }
}

// 切换分页
const handlePageChange = (page, size) => {
    tablePage.value.page = page
    tablePage.value.size = size
    requestTableData()
}

onMounted(() => {
    requestTableData()
})
</script>
<style lang='scss' scoped>
</style>
